<template>
  <div>
    <HomeTop></HomeTop>
    <div>
      <div class="ok-page-width">
        <div>
          <el-image style="width: 100%;height: 260px;margin-top: 20px;border-radius: 5px" :src="require('@/static/images/product.jpg')"></el-image>
        </div>
        <div class="line-20"></div>
        <div class="ok-box-flex">
          <div class="ok-width-max">
            <div class="ok-page-main">
              <div class="">
                <div class="ok-park-info-title" style="position: relative">
                  <el-page-header @back="goBack" :content="title">
                  </el-page-header>
                </div>
                <div class="ok-info20" style="width: 1100px;">
                  <div >
                    <div style="width: 100%;">
                      <el-row>
                        <el-col :span="5" v-for="(item, index) in pagesData.list" :key="index" style="margin: 20px;display: flex;justify-content: space-around;position: relative" >
                          <el-card :body-style="{ padding: '10px' }">
                            <!--                    <el-image :src="require('@/static/images/image02.jpg')" style="width: 200px;height: 200px;border-radius: 5px" :fit="fill"></el-image>-->
                            <div @click="goView(item)" style="cursor: pointer">
                              <el-image :src="ok.tool.getImg(item.image)" style="width: 200px;height: 200px;"></el-image>
                              <div style="padding: 10px">
                                <div class="ok-box-center-left"><span>{{item.title}}</span></div>
                                <div class="ok-box-center-left">
                                  <span style="color: #b7bec9;font-size: 10px">到手价：</span>
                                  <span style="color:red;font-size: 20px">￥{{item.price}}</span>
                                </div>
                              </div>
                            </div>

                          </el-card>
                        </el-col>
                      </el-row>
                    </div>
                    <div class="block ok-box-center">
                      <el-pagination
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page.sync="pagesData.current"
                          :page-sizes="[5, 10, 20, 50]"
                          :page-size="pagesData.pageSize"
                          layout="sizes, prev, pager, next"
                          :total="pagesData.total">
                      </el-pagination>
                    </div>
                  </div>
                </div>
                <div class="ok-info20" style="height: 180px;background-color: #FFFFFF;margin-top: 30px;display: none">
                  <div style="padding-top: 20px">
                  <span style="color: #0092FF;font-size: 16px;font-weight: bold;padding-top: 15px;height: 25px;line-height: 25px;padding-left: 31px">
                    免责声明
                  </span>
                    <p style="color: #666666;line-height: 28px;font-size: 13px;padding-top: 25px;padding-left: 31px">
                      1、平台发布此信息目的在于传播更多信息，与本网站立场无关。<br>
                      2、平台不保证该信息（包括但不限于文字、数据及图表）全部或者部分内容的准确性、真实性、完整性、有效性、
                      及时性、原创性等。<br>
                      3、相关信息并未经过本网站证实，不对您构成任何投资建议，据此操作，风险自担。<br>
                      <br>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="ok-box-left" style="width: 200px;margin-left: 20px;flex-direction: column;">
            <div style="width: 100%">
              <div style="height: 300px">
                <el-image :src="require('@/static/images/image01.jpg')" style="width: 100%;height: 100%;"></el-image>
              </div>
            </div>
            <div class="line-15"></div>
            <div style="width: 100%">
              <div style="height: 300px">
                <el-image :src="require('@/static/images/image04.png')" style="width: 100%;height: 100%;"></el-image>
              </div>
            </div>
          </div>
        </div>


      </div>
    </div>
    <div class="line-20"></div>
    <HomeFoot></HomeFoot>
  </div>
</template>
<script>

import {defineComponent} from "vue";
import HomeTop from "@/components/HomeTop.vue";
import ok from "@/assets/ok";
import api from "@/api/publicApi"
import HomeFoot from "@/components/HomeFoot.vue";

export default defineComponent({
  computed: {
    ok() {
      return ok
    }
  },
  components: {HomeFoot, HomeTop},
  data(){
    return{
      title:"商户产品",
      formVisible:false,
      userInfo:{},
      ok_page:{
        userId:"",
        key:"",
        pageSize:10,
        current:0,
        status:9
      },
      pagesData:{
        list:[],
        pageSize:0,
        current:0,
        total:0
      },
    }
  },
  mounted() {
    this.init();
    api.getSale();
  },
  methods:{
    init(){
      if (this.$route.query.name){
        this.title = this.$route.query.name + "的产品";
      }
      this.ok_page.userId = this.$route.query.id;
      api.getProductPage(this.ok_page).then(res =>{
        this.pagesData = res.result;
      })
    },
    goBack() {
      history.go(-1);
    },
    handleSizeChange(val){
      this.ok_page.pageSize = val;
      this.getPage();
    },
    handleCurrentChange(val){
      this.ok_page.current = val;
      this.getPage()
    },
    goView(item){
      this.$router.push({
        path:"/views/product/productView",
        query:{
          id:item.id
        }
      })
    },
  }
})
</script>
<style>

</style>
